<template>
	<!--components/popup/index.wxml-->
	<u-popup :show="isShow" @close="isShow=false" :closeIconColor="'#ffffff'" 
		:borderRadius="12" mode="bottom" 
		:mask-close-able="false"
		:closeable="closeable">
		<view class="container">
			<view class="projectWrapper">
				<image class="logo" :src="shopInfo.logo" mode=""></image>

				<view class="name">
					{{shopInfo.name}}
				</view>
				<view class="">
					申请
				</view>
			</view>
      <!-- #ifdef MP-TOUTIAO -->
      <view v-if="titleType" class="title">
        获取你的个人信息（头像，昵称等）
      </view>
      <view v-else class="title">
        获取你的个人信息（头像，昵称等）
      </view>
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN ||MP-TOUTIAO  -->
			<view v-if="titleType" class="title">
				点我 可了解项目基础信息
			</view>
			<view v-else class="title">
				点我 可了解项目基础信息
			</view>
      <!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="btnWrapper">
				<view v-if="!closeButtonAble" class="confirmOnly"  @click="onConfirm">
					允许
				</view>
				<template v-else>
					<view class="cancle" @click="close">
						取消
					</view>
					<view class="confirm" @click="onConfirm">
						允许
					</view>
				</template>	
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<view class="btnWrapper">
				<view v-if="!closeButtonAble" class="confirmOnly"  @click="onInfoAuth">
					允许
				</view>
				<template v-else>
					<view class="cancle" @click="close">
						取消
					</view>
					<view class="confirm" @click="onInfoAuth">
						允许
					</view>
				</template>
			</view>
			<!-- #endif -->

			<!-- #ifdef MP-BAIDU -->
			<view class="btnWrapper">
				<button v-if="!closeButtonAble" style="border: none;padding: 0;margin:0 0 30rpx 0;" type="default" plain="true"
					open-type="getUserInfo" class="confirmOnly" @getuserinfo="onInfoAuthBaidu">
					允许
				</button>

				<template v-else>
					<view class="cancle" @click="close">
						取消
					</view>
					<button style="border: none;padding: 0;margin:0 0 30rpx 0;" type="default" plain="true"
						open-type="getUserInfo" class="confirm" @getuserinfo="onInfoAuthBaidu">
						允许
					</button>
				</template>	
			</view>
			<!-- #endif -->
		</view>
	</u-popup>
</template>

<script>
	const api = require("@/static/js/api.js")
	let that = null
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				isShow: false,
			};
		},
		computed: {
			...mapState({
				hasLogin: state => state.userInfo.hasLogin,
				isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
				buyerObj: state => state.userInfo.buyerObj,
				shopInfo: state => state.userInfo.shopInfo,
			}),
		},
		components: {},
		props: {
			value: {
				type: Boolean
			},

			closeButtonAble: {
				type: Boolean,
				default: true,
			},
			closeable: {
				type: Boolean,
				default: false,
			},
			titleType: {
				type: Boolean,
				default: false,
			},
		},
		watch: {
			value: {
				handler: function observer(val) {
					var _this = this;
					this.isShow = val;
		
				},
				immediate: true
			},
			isShow: {
				handler: function observer(val) {
					var _this = this;
					this.$emit('input', val)
					if (!val) {
						this.$emit('cancel');
					}
				},
				immediate: true
			},

		},
		mounted() {
			that = this;
		},

		methods: {
			...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId']),
			...mapActions(['interceptorLoginInfoAuth', 'interceptorLoginPhoneAuth', 'updateUserInfo']),
			close(e) {
				let that = this
				that.isShow = false
				this.$emit('cancel');
			},
			// #ifdef MP-BAIDU
			onInfoAuthBaidu(e) {
				let that = this
				var ev = e.detail
				console.log("onInfoAuthBaidu:", e)
				api.updateUserInfo({
					param: {
						nickname: ev.userInfo.nickName || "",
						avatar: ev.userInfo.avatarUrl || "",

					}
				}).then(res => {
					if (res.success) {
						api.getUserInfo().then(res => {
							console.log(res)
							if (res.success) {
								console.log("用户信息授权成功")
								that.setUserInfo(res.data);
								that.setLoginStatus(true);
								that.isShow = false
								that.$emit('confirm')
							} else {

							}
						}).catch(err => {

						})
					}
				})
			},
			// #endif

			onConfirm() {
				let that = this
				that.isShow = false
				uni.navigateTo({
					url:"/pages/common/setUserInfo/index"
				})
			},
      // #ifdef MP-TOUTIAO
      onInfoAuth(){
        let that = this
        that.isShow = false
        if (uni.getUserProfile) {
          uni.getUserProfile({
            lang: 'zh_CN',
            desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
            success: (res) => {

              api.updateUserInfo({
                param: {
                  nickname: res.userInfo.nickName || "",
                  avatar: res.userInfo.avatarUrl || "",
                  // province: res.userInfo.province || "",
                  // city: res.userInfo.city || "",
                  // country: res.userInfo.country || "",
                  // gender: res.userInfo.gender.toString() || "",
                }
              }).then(res => {
                if (res.success) {
                  api.getUserInfo().then(res => {
                    console.log(res)
                    if (res.success) {
                      that.loginWechat().then(res => {
                        console.log("手机授权成功")
                        that.isShow = false
                        that.$emit('confirm')
                        //====如果是雇员直接重启
                        if (that.shopInfo.isEnInvite&&that.isSeller){
                          // uni.reLaunch({
                          //     url:'/pages/home/home'
                          // })
                        }
                      }).catch(res=>{
                        // uni.showModal({
                        //     title: '登录失败',
                        //     content: "手机授权，登陆失败，，，"
                        // });
                      })
                    } else {

                    }
                  }).catch(err => {

                  })
                }
              })
            },
            fail: (res) => {
              console.log(res)
            }
          })
        }
      },
      // #endif
		}
	};
</script>


<style lang="scss">
	.container {
		width: 750rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding-bottom: env(safe-area-inset-bottom);
		.projectWrapper{
			margin-left: 20rpx;
			font-size: 29rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0rpx;
			line-height: 30rpx;
			color: #000000;
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			.logo{
				width: 57rpx;
				height: 57rpx;
				background-color: #f6f6f6;
				border-radius: 50%;
			}
			.name{
				margin-right: 15rpx;
				margin-left: 20rpx;
			}
						
		}
		.title{
			font-size: 32rpx;
			margin-top: 47rpx;
			margin-bottom: 64rpx;
			margin-left: 30rpx;
			color: #000000;
			font-weight: bold;
		}
		.btnWrapper{
			width: 750rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			padding-bottom: 30rpx;
			.confirmOnly{
				width: 650rpx;
				height: 86rpx;
				background-color: #01ba55;
				border-radius: 5rpx;
				line-height: 86rpx;
				text-align: center;
				color: #ffffff;
			}
			.confirm{
				width: 245rpx;
				height: 86rpx;
				background-color: #01ba55;
				border-radius: 5rpx;
				line-height: 86rpx;
				text-align: center;
				color: #ffffff;
				margin-left: 30rpx;
			}
			.cancle{
				width: 245rpx;
				height: 86rpx;
				background-color: #e8e9eb;
				border-radius: 5rpx;
				line-height: 86rpx;
				text-align: center;
				color: #01ba55;
			}
			
		}
	}


</style>
